{{extend './_layouts/home.html'}}
{{block 'css'}}
<link rel="stylesheet" href="public/css/index.css">
{{/block }}
{{block 'body'}}
<div class="czq_banner">
    <div class="banner-img-box clearFix">
        <img src="public/images/banner1.jpg">
        <img src="public/images/banner2.jpg">
        <img src="public/images/banner3.jpg">
        <img src="public/images/banner1.jpg">
    </div>

    <div class="banner-other-center">
        <p class="introduce">
            Hello,I'm czq
        </p>
    </div>
    <div class="welcome">
        <span>The</span><span>most</span><span>beautiful</span><span>one</span><span>is</span><span>not</span><span>the</span><span>rainy</span><span>day</span>
    </div>
    <!-- <canvas id="stars"></canvas> -->
    <div class="banner-other-more">
        <span class="glyphicon glyphicon-arrow-down" id="more"></span>
    </div>
</div>
<div class="mainContent">
  <div class="container index_container">
      <div class="main-left">
          <img src="public/images/main-top.jpg" alt="" class="main-left-top">
          <div class="media">
              <h3>嗨，欢迎来到我的网站</h3>
              <div class="media-info">
                  <span class="media-info-user">
                      <i class="fa fa-user"></i>297
                  </span>
                  <span class="media-info-timer">
                      <i class="fa fa-calendar"></i>2019年12月25日上午 09:14:57
                  </span>
                  <span class="media-info-click">
                      <i class="fa fa-eye"></i>0次点击
                  </span>
              </div>
              <div class="media-content">
                  <a href="#">
                      <img src="public/images/logo.jpg" alt="">
                  </a>
                  <p>
                      《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，在《周刊少年Jump》1997年12月24日开始连载。 改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。 2012年5月11日，《航海王》获得第41回日本漫画家协会赏 [1] 。 截至2015年6月15日，《航海王》以日本本土累计发行了3亿2086万6000本，被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画” [2] 。 2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日”
                      [3] 。
                  </p>
              </div>
          </div>
          <div class="media">
            <h3>嗨，欢迎来到我的网站</h3>
            <div class="media-info">
                <span class="media-info-user">
                    <i class="fa fa-user"></i>297
                </span>
                <span class="media-info-timer">
                    <i class="fa fa-calendar"></i>2019年12月25日上午 09:14:57
                </span>
                <span class="media-info-click">
                    <i class="fa fa-eye"></i>0次点击
                </span>
            </div>
            <div class="media-content">
                <a href="#">
                    <img src="public/images/logo.jpg" alt="">
                </a>
                <p>
                    《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，在《周刊少年Jump》1997年12月24日开始连载。 改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。 2012年5月11日，《航海王》获得第41回日本漫画家协会赏 [1] 。 截至2015年6月15日，《航海王》以日本本土累计发行了3亿2086万6000本，被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画” [2] 。 2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日”
                    [3] 。
                </p>
            </div>
        </div>
        <div class="media">
            <h3>嗨，欢迎来到我的网站</h3>
            <div class="media-info">
                <span class="media-info-user">
                    <i class="fa fa-user"></i>297
                </span>
                <span class="media-info-timer">
                    <i class="fa fa-calendar"></i>2019年12月25日上午 09:14:57
                </span>
                <span class="media-info-click">
                    <i class="fa fa-eye"></i>0次点击
                </span>
            </div>
            <div class="media-content">
                <a href="#">
                    <img src="public/images/logo.jpg" alt="">
                </a>
                <p>
                    《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，在《周刊少年Jump》1997年12月24日开始连载。 改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。 2012年5月11日，《航海王》获得第41回日本漫画家协会赏 [1] 。 截至2015年6月15日，《航海王》以日本本土累计发行了3亿2086万6000本，被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画” [2] 。 2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日”
                    [3] 。
                </p>
            </div>
        </div>
      </div>
      <div class="main-right">


          <div class="main-right-music-player">
              <span id="prev" class="glyphicon glyphicon-step-backward"></span>
              <span id="play-pause" class="glyphicon glyphicon-play"></span>
              <span id="next" class="glyphicon glyphicon-step-forward"></span>
              <span id="restart" class="glyphicon glyphicon-stop"></span>
              <div id="outline">
                  <div id="innerline"></div>
                  <!-- <div id="circle"></div> -->
              </div>
              <p id="songName"></p>
              <p>
                  <i id="curtime"></i>
                  <i id="sumtime"></i>
              </p>
          </div>

          <div class="main-right-weather">
              <a href="http://www.weather.com.cn/weather/101220601.shtml" target="_blank">
                  <span class="weather weather-img iconfont">&#xe61f;</span>
                  <span class="weather weather-temp">11~26℃</span>
                  <span class="weather weather-desc">晴转多云</span>
                  <span class="weather weather-wind">西南风3~4级</span>
              </a>
          </div>

          <div class="main-right-links">
              <h3>常用链接</h3>
              <ul>
                  <li>
                      <img src="public/images/vue-logo.jpg" alt="">
                      <a href="https://cn.vuejs.org/v2/guide/" target="_blank">渐进式框架Vue</a>
                  </li>
                  <li>
                      <img src="public/images/bootstrap-logo.jpg" alt="">
                      <a href="https://www.bootcss.com/" target="_blank">前端开发框架BootStrap</a>
                  </li>
                  <li>
                      <img src="public/images/tencent-logo.jpg" alt="">
                      <a href="https://cloud.tencent.com/?fromSource=gwzcw.2212127.2212127.2212127&utm_medium=cpd&utm_id=gwzcw.2212127.2212127.2212127" target="_blank">腾讯云-产业智变-云启未来</a>
                  </li>
                  <li>
                      <img src="public/images/bilibili-logo.jpg" alt="">
                      <a href="https://www.bilibili.com/" target="_blank">bilibili-哔哩哔哩弹幕网</a>
                  </li>
              </ul>
          </div>

          <div class="main-right-comments" id="comment-box">
            
          </div>
          <div class="addcomment">
            <form id="form-comment">
                <input type="hidden" id="hidden-input" name="email" value="{{ user ? user.email : -1 }}">
                <textarea name="content" id="textarea" class="form-control" placeholder="来说点什么吧..."></textarea>
                <button type="submit" id="btn-addcomment" class="btn btn-success float_right">发表评论</button>
            </form>
        </div>
      </div>
  </div>
  <audio src="public/music/001.mp3"  id="music">
      您的浏览器不支持本audio，请更新后重试。
  </audio>
</div>
{{/block}}

{{ block 'script'}}
<script src="public/js/index.js"></script>
<script src="public/js/music.js"></script>
<script>
    let commentList=[]
    $.ajax({
        url:'/comment',
        type:'get',
        dataType:'json',
        success(data){
            commentList = data
            showComment(data)
            console.log(commentList)
        }
    })
    function showComment(list){
        let commentBox = $('#comment-box')
        let str = ''
        commentBox.html(str)
        list.forEach(function(ele,index){
            str+=`
            <div class="comment">
                  <p class="comment-user">
                    <a href="/usercenter"  class="comment-avatar"><img src=" ${ele.avatar}" alt=""></a>
                     <span>${ele.nickname}：</span> 
                    </p>
                  <p class="comment-content">${ele.content}</p>
              </div>
            `
        })
        commentBox.html(str)
    }
    $('#form-comment').on('submit',function(e){
        e.preventDefault()
        if($('#hidden-input').val()==-1){
            return window.alert('请先登录后再留言呢...')
        }
        let curComment={
            avatar:'{{ user?user.avatar:0 }}' ,
            nickname:'{{ user?user.nickname:0}}',
            content: $('#textarea').val()
        }
        var formData = $(this).serialize()
        $.ajax({
          url: '/comment',
          type: 'post',
          data: formData,
          dataType: 'json',
          success: function (data) {
           if(data.err_code==0){
               window.alert('评论成功！')
               commentList.push(curComment)
               showComment(commentList)
               $('#textarea').val('')
           }else{
               window.alert('服务器忙，请稍后重试！')
           }
          }
        })
    })
</script>
{{ /block }}
